<template>
	<view>
		<view class="bj">
			<view class="flex justify-end ified_nav"><uv-icon name="list-dot" size="29"></uv-icon></view>
			<view class="p-10">
				<uv-input suffixIcon="search" placeholder="婴幼儿喂养 / 抚触护理 / 新生儿" suffixIconStyle="color: #909399"
					shape="circle" @focus="search"></uv-input>
			</view>
			<!-- 使用flex容器包裹两张图片 -->
			<view>
				<view>
					<img style="width: 100%; height: 150px; object-fit: cover;" :src="this.topImg.imgPath" />
				</view>
				<view class="image-container mt-20 pb-20">
					<img class="image-item shop" src="../../../static/home/my-video-new.png" />
				</view>
			</view>
		</view>
		<view class="mt-20">
			<uv-row gutter="10" style="flex-wrap: wrap">
				<uv-col span="6" v-for="(item,index) in newList" :key="index">
					<cardVideo @click="videoClick(item)" :data="item" />
				</uv-col>
				<!-- 	<uv-col span="6">
					<cardVideo :data="newObj" @click="videoClick(newObj)" />
				</uv-col> -->
			</uv-row>
		</view>
		<view class="mt-10">
			<uv-row gutter="10">
				<uv-col span="6">
					<view class="bj roundness" @click="moreClick">
						<uv-icon name="more-circle" color="warning"></uv-icon><text class="ml-10">看更多</text>
					</view>
				</uv-col>
				<uv-col span="6">
					<view class="bj roundness" @click="watchman">
						<uv-icon name="reload" color="warning"></uv-icon>
						<text class="ml-10">换一换</text>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="mt-10">
			<topTitle :bannerWord="'精选专辑'" @rightTextEvent="rightTextEvent" />
		</view>
		<view class="pb-10 bg-white mb-10" v-for="(item,index) in hots" :key="index" @click="courseFn(item)">
			<view class="p-10 topLine">
				<uv-row gutter="10">
					<uv-col span="4"> <img src="http://spnrxma3o.hb-bkt.clouddn.com/images/_____20241212095951.png"
							alt="" class="responsive-img"> </uv-col>
					<uv-col span="8">
						<view class="h6 text-dark"> {{item.title}} </view>
						<view class="font-small flex align-items-center mb-10 mt-10">
							<view class="mark"> {{item.tags}} </view>
						</view>
						<view class="font-22"> {{item.description}} </view>
					</uv-col>
				</uv-row>
			</view>
			<view class="flex justify-between align-center text-dark font-22 p-10">
				<view>
					<text class="iconfont icon-shipin mr-10" style="font-size: 26rpx"></text>
					共一集
				</view>
				<view> 暂无特惠 </view>
			</view>
		</view>
		<view class="carousel mt-20">
			<uv-swiper :list="carouselList" indicator indicatorMode="line" circular></uv-swiper>
		</view>
		<view class="mt-20">
			<topTitle :bannerWord="'大咖医生'" @rightTextEvent="rightTextEvent2" />
		</view>
		<view class="doctors p-10 flex align-center">
			<!-- <view style="width: 300px;" class="fixed"> -->
			<view class="bg-white doctors_item" v-for="(item, index) in doctorsList" :key="item.doctorId">
				<uv-row gutter="10" @click="doctorClick(item)">
					<uv-col span="4">
						<img style="width: 90%; height: auto" src="../../../static/home/doctor-portait.png" />
					</uv-col>
					<uv-col span="8">
						<view class="flex align-center justify-between">
							<view class="text-dark">{{item.doctorName}}</view>
							<view class="font-small">{{item.title}}</view>
							<view class="roundBox flex align-center justify-center">
								<uv-icon name="arrow-right" size="14" color="#fff"></uv-icon>
							</view>
						</view>
						<view class="font-small flex align-items-center mb-10 mt-10">
							<view class="mark2"> {{item.specialization}} </view>
						</view>
						<view class="font-22 textBox">
							擅长方向: {{item.expertise}}
						</view>
					</uv-col>
				</uv-row>
				<uv-divider></uv-divider>
				<view class="flex justify-between align-center font-22">
					<view class="flex align-center">
						<text class="text-warning mr-10 font-sm">0</text>
						<text>个精品视频</text>
					</view>
					<view>
						<uv-text size="12" type="warning" text="看视频"></uv-text>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	import tip from '@/common/util/tip.js'
	import cardVideo from './cardVideo.vue'
	import topTitle from '@/components/common/title.vue'
	import {
		homeDoctor
	} from "@/common/api/medic/medic.js"
	import {
		lesson,
		campaignInfo
	} from "@/common/api/home/home.js"
	export default {
		components: {
			cardVideo,
			topTitle,
		},
		data() {
			return {
				tips: '',
				value: '内容',
				bannerWord: '精选专辑',
				imagePaths: [
					'../../../static/home/album-pic-1.png',
					'../../../static/home/album-pic-2.png',
				],
				doctorsList: [1, 1, 1, 1, 1],
				lessonList: {},
				hots: [],
				newList: [],
				topImg: {},
				carouselList: []

			}
		},
		created() {},
		computed: {},
		mounted() {
			this.queryDoctorInfoFn()
			this.lessonFn()
			this.campaignInfoFn({
				position: "top",
				size: '1'
			})
			this.campaignInfoFn({
				position: "carousel",
				size: '5'
			})
		},
		methods: {

			rightTextEvent() {
				uni.navigateTo({
					url: '/pages/courseList/courseList',
				})
			},
			rightTextEvent2() {
				uni.navigateTo({
					url: '/pages/medicList/medicList',
				})
			},
			courseFn() {
				uni.navigateTo({
					url: '/detail/course/course',
				})
			},
			codeChange() {},
			getCode() {},
			search() {
				uni.navigateTo({
					url: '/pages/search/search',
				})
			},
			moreClick() {
				uni.navigateTo({
					url: '/detail/courseMore/courseMore',
				})
			},
			videoClick(item) {

				uni.navigateTo({
					url: `/detail/video/video?id=${item.lessonId}`,
				})
			},
			doctorClick(item) {
				uni.navigateTo({
					url: `/detail/doctor/doctor?id=${item.doctorId}`,
				})
			},

			queryDoctorInfoFn() {
				homeDoctor({

				}).then((res) => {
					if (res.doctors?.length) {
						this.doctorsList = res.doctors // 将新数据追加到现有数据中
					}
				}).catch((err) => {
					tip.toast(err);
				})
			},
			campaignInfoFn(obj) {
				campaignInfo(obj).then((res) => {
					console.log(res, 'res')
					if (!res.length) {
						return
					}
					if (obj.position == 'top') {
						this.topImg = res[0]
					} else {
						this.carouselList = res.length.map(item => {
							return item.imgPath
						})
					}
					console.log(this.carouselList, 'carouselList')
				}).catch((err) => {

				})
			},
			lessonFn() {
				lesson({

				}).then((res) => {
					this.lessonList = res
					res.hots?.length && (
						this.hots = res.hots)
					res.news?.length && (
						this.newList = res.news)
					console.log(this.newList, 'this.newList')

				}).catch(() => {
					tip.toast('网络异常!');
				})
			},
			watchman() {
				this.lessonFn()
			},
		},
	}
</script>

<style scoped>
	.bj {
		background-color: #fff;
	}

	/* 定义一个新的样式规则 */
	.image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		/* 图片之间的间隔 */
	}

	.image-item {
		max-height: 100px;
		/* 统一图片的最大高度 */
		/* height: auto; */
		/* 保持图片比例 */
		max-width: 100%;
		/* 确保图片宽度不超过其容器 */
	}

	.shop {
		height: 18px;
		/* 如果你想保持这个特定的高度，可以保留 */
	}

	.ified_nav {
		/* border-bottom:; */
		padding: 5px;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
	}

	.roundness {
		display: flex;
		justify-content: center;

		border-radius: 20px;
		margin: 5px;
		padding: 5px;
		font-size: 14px;
		color: #666666;
	}

	.mark {
		display: inline-block;
		border: 1px solid #efa017;
		color: #efa017;
		border-radius: 5px;
		padding: 2px 8px;
		white-space: nowrap;
		text-align: center;
		/* margin: auto; */
		/* 可选：确保它在水平方向上居中 */
	}

	.mark2 {
		display: inline-block;
		border: 1px solid #efefef;
		/* color: #efa017; */
		border-radius: 5px;
		/* width: 70rpx; */
		/* text-align: center; */
		border-radius: 5px;
		padding: 2px 8px;
		white-space: nowrap;
		text-align: center;
	}

	.topLine {
		border-top: 1px solid #f3f3f3;
	}

	.doctors {
		display: flex;
		overflow-x: auto;
		-ms-overflow-style: none;
		/* Internet Explorer 10+ */
		scrollbar-width: none;
		/* Firefox */
		flex-wrap: nowrap;
		/* 防止换行 */
	}

	/* 隐藏滚动条 */
	.doctors::-webkit-scrollbar {
		display: none;
		/* Safari and Chrome */
	}

	.doctors_item {
		width: 460rpx;
		/* 固定宽度 */
		margin-right: 10px;
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
		/* 禁止缩小 */
		flex-grow: 0;
		/* 禁止增长 */
	}

	.textBox {
		display: -webkit-box;
		/* 使用弹性盒子模型 */
		-webkit-box-orient: vertical;
		/* 设置子元素排列方式：从上到下 */
		-webkit-line-clamp: 1;
		/* 设置最大显示的行数为2 */
		overflow: hidden;
		/* 隐藏超出内容 */
		text-overflow: ellipsis;
		/* 溢出内容用省略号表示 */
	}

	.roundBox {
		width: 16px;
		/* 设置宽度 */
		height: 16px;
		/* 确保高度等于宽度 */
		border-radius: 50%;
		/* 使元素变为圆形 */
		/* 可选：添加背景颜色或边框样式 */
		background-color: #fe9c00;
	}
</style>